import { useState } from "react";
import "./App.css";
import MyLayoutPage from "./MyLayoutPage";
import { ConfigProvider } from "antd";
import { themes } from "./config/themeConfig.js";
import zhCN from "antd/locale/zh_CN";
import enUS from "antd/locale/en_US";

function App() {
  // theme
  function getDefaultTheme() {
    const theme = import.meta.env.VITE_THEME;
    if (theme === "red") return themes.redTheme;
    if (theme === "green") return themes.greenTheme;
    return themes.greenTheme;
  }
  const defaultTheme = getDefaultTheme();
  const [currentTheme, setCurrentTheme] = useState(defaultTheme);

  // language
  const language = import.meta.env.VITE_LANGUAGE;
  const [currentLanguage, setCurrentLanguage] = useState(language);
  function getLanguage(lang: string) {
    if (lang === "CN") {
      return zhCN;
    }
    if (lang === "US") {
      return enUS;
    }
    return zhCN;
  }

  return (
    <>
      <ConfigProvider
        locale={getLanguage(currentLanguage)}
        theme={currentTheme}
      >
        <MyLayoutPage
          children={
            <>
              {/* <Button onClick={() => setCurrentTheme(themes.greenTheme)}>
              绿色主题
            </Button>
            <Button onClick={() => setCurrentTheme(themes.redTheme)}>
              红色主题
            </Button> */}
            </>
          }
        />
      </ConfigProvider>
    </>
  );
}

export default App;
